// ui/components/LeftSidebar.js
import WhiteboardPanel from './WhiteboardPanel.js'; // Assuming WhiteboardPanel.js exists and is correct

export default {
  name: 'LeftSidebar',
  components: {
    'whiteboard-panel': WhiteboardPanel,
  },
  props: {
    whiteboardItems: {
      type: Array, // Was Array as PropType<WhiteboardItemModel[]>
      required: false,
      default: () => []
      // JSDoc for reference:
      /**
       * @type {Array<{
       *   reference_id: string;
       *   display_name: string;
       *   full_local_path: string;
       *   uploader_participant_id: string;
       *   timestamp_added: string;
       * }>}
       */
    }
  },
  emits: ['add-whiteboard-item', 'remove-whiteboard-item'],
  setup(props, { emit }) {
    // const { ref } = Vue; // ref is not directly used by the provided setup logic

    function handleAddWhiteboardItem(filePath) { // filePath was string
      emit('add-whiteboard-item', filePath);
    }

    function handleRemoveWhiteboardItem(itemId) { // itemId was string
      emit('remove-whiteboard-item', itemId);
    }

    return {
      handleAddWhiteboardItem,
      handleRemoveWhiteboardItem,
      // props are automatically available in the template
    };
  },
  template: `
  <div class="left-sidebar-container">
    <slot>
      <!-- WhiteboardPanel component will be placed here by App.vue or this component -->
      <!-- For now, a placeholder or direct import if it's always the same -->
      <whiteboard-panel 
        v-if="whiteboardItems" 
        :items="whiteboardItems" 
        @add-item="handleAddWhiteboardItem" 
        @remove-item="handleRemoveWhiteboardItem" 
      />
      <div v-else>Loading Whiteboard...</div>
    </slot>
  </div>
  `
};